<template>
  <div style="background: #FFFFFF; position: absolute;top: 0px;bottom: 0px;right: 0;left: 0;padding: 2px 0;">
    <van-nav-bar
      :fixed="true"
      class="navbar-btm"
		>
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">我的</p>
      </template>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>

    <div class="content" >
      <img class="image" src="../../assets/my/my2x.jpg"/>
      <img class="textIcon" src="../../assets/my/myTextIcon2x.png" alt="">
      <van-button style="margin-bottom: 4vh;"
        type="primary" size="normal" class="btn"
        @click="onLogOut()"
      >退出登录</van-button>
    </div>
    <div style="width: 100%;height: 50px;"></div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import tabbar from '@/components/tabbar/index'
import { SystemController } from '@/api';

export default {
  components: {
    tabbar
  },
  data () {
    return {

    }
  },
  methods: {
    onLogOut () {
      SystemController.logout(this).then(res => {
        this.$router.replace('login');
      });
    }
  }
}
</script>
<style scoped>
.navbar-btm{
  border-bottom: 1px solid #E8E8E8;
}
.content{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}
.content .image{
  width: 100%;
  height: auto;
}
.content .textIcon{
  width: 70%;
  height: auto;
  margin: 0px 0 4vh 0;
}
.content p{
  width: 100%;
  color: #666666;
  font-size: 14px;
  margin: 5px 0 34px 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
.content p span{
  font-size: 16px;
  color: #ff7700;
}
.btn{
  width: 120px;
  height: 40px !important;
  border-radius: 4px !important;
}
</style>
